<template>
  <div>
    <h1 class="subheading grey--text">Projects</h1>
    <v-container class="my-5">
      <!-- 下拉详情 -->
      <v-expansion-panel>
        <v-expansion-panel-content v-for="project in myProjects" :key="project.name">
          <template v-slot:header>
            <div slot="header">{{project.title}}</div>
          </template>
          <v-card>
            <v-card-text class="px-4 grey--text">
              <div class="font-weight-bold">due by {{project.due}}</div>
              <div>{{project.content}}}</div>
            </v-card-text>
          </v-card>
        </v-expansion-panel-content>
      </v-expansion-panel>
    </v-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      projects: [
        { title: "Tom", person: "Tom", due: "Caster", content: "/1.jpg" },
        { title: "Jim", person: "Jim", due: "Rider", content: "/2.jpg" },
        { title: "Herry", person: "Herry", due: "Saber", content: "/3.jpg" },
        { title: "Potter", person: "Potter", due: "Archer", content: "/4.jpg" },
        { title: "shuoGG", person: "shuoGG", due: "Archer", content: "/4.jpg" }
      ]
    };
  },
  computed: {
    myProjects() {
      return this.projects.filter(project => {
        return project.person === "shuoGG";
      });
    }
  }
};
</script>
